<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2024/12/19
  Time: 15:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>注册</title>
    <script type="text/javascript" src="/JD/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        $(function (){
            $("#username").blur(checkUsername);//用户名文本框失去焦点
        });

        function checkUsername(){
           var reg = /^\w{3,15}$/;//正则表达式 3-15字符
           var username = $("#username").val();//输入用户名
           if (reg.test(username)){//合法
               //验证用户名是否重复
               //Ajax
               var flag;
               $.ajax({
                   url:"/JD/isRename",
                   type:"get",
                   async:false,//同步
                   data:{x:username},
                   success:function (message){

                       if (message=="1"){
                           $("#usernameRs").html("√");
                           $("#usernameRs").css("color","green");
                           flag = true;
                       }
                       if (message=="0"){
                           $("#usernameRs").html("×重复");
                           $("#usernameRs").css("color","red");
                           flag = false;
                       }
                   }
               });
               return flag;
           }else {//不合法
               $("#usernameRs").html("×非法");
               $("#usernameRs").css("color","red");
               return false;
           }
        }
    </script>
    <script type="text/javascript">
        $(function (){
            $("#myform").submit(check);
        });
        function check(){
            var falseUsername = checkUsername();
            return falseUsername;
        }
    </script>
</head>
<body>
<h3>注册页面</h3>
<form id="myform" action="/JD/register" method="post" enctype="multipart/form-data">
<%-- enctype 表单提交二进制编码--%>
    用户名： <input type="text" id="username" name="username"><span id="usernameRs"></span><br>
    密 码：<input type="password"name="password"><br>
    头 像：<input type="file" id="face" name="face"><img src="" id="img" width="75"><br>
    <input type="submit"value="注册">
</form>
    <%--图片预览--%>
    <script type="text/javascript">
        $(function (){
           $("#face").change(preview);
        });

        function preview(){
            //获取文件域对象
            var inputFile = document.getElementById("face");
            var files = inputFile.files;
            var fileReader = new FileReader();

            //打开文件输出流
            fileReader.onload = function (e){
                $("#img").attr("src",e.target.result);
            }
            fileReader.readAsDataURL(files[0])

        }
    </script>
</body>
</html>
